<template>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false" @select="handleSelect">
        <el-menu-item index="0" @click="toHome">LOGO</el-menu-item>
        <div class="flex-grow" />
        <el-menu-item index="1" v-show="store.getters.getUserInfo.userType === '1'" @click="toAdminHome">后台</el-menu-item>
        <el-sub-menu index="2">
            <template #title>我的</template>
            <el-menu-item index="2-1">个人中心</el-menu-item>
            <el-menu-item index="2-2" @click="logout">退出登录</el-menu-item>
           
        </el-sub-menu>
    </el-menu>
</template>
  
<script lang="ts" setup>
import api from '@/api';
import router from '@/router';
import store from '@/store';
import { ElNotification } from 'element-plus';
import { ref } from 'vue'

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

function logout() {
    api.login.logout()
        .then(response => {
            router.push({ path: '/login' })
            store.dispatch('updateToken', null);
            store.dispatch('updateUserInfo', '');
            store.dispatch('updateIsLoggedIn', false);
            ElNotification({
                title: 'Success',
                message: response.data.msg,
                type: 'success',
                duration: 1500
            })
        })
        .catch(error => {
            ElNotification({
                title: 'Error',
                message: error.data.msg,
                type: 'error',
                duration: 1500
            })
        });
}

function toAdminHome() {
    router.push("admin")
}

function toHome() {
    router.push("/")
}
</script>
  
<style>
.flex-grow {
    flex-grow: 1;
}
</style>
  